<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表展现</title>
		
		<!-- 导包js函数类库 -->
		<script src="jquery-3.6.0.min.js"></script>
		<!-- 2.编辑js发起Ajzx请求 -->
		<script>
			//让页面加载完成之后再次执行 
			//语法:函数式编程
			$(function(){
				//alert("页面加载完成,jQuery调用成功")
				//利用Ajzx的get请求方式 http://localhost:8090/getUser
				//将数据以表格形式呈现出来
				//种类:1 $.get() 2 $.post() 1 $.ajax()
				var url= "http://localhost:8090/getUser"
				//var args={name:"李四",age:12}
				$.get(url,function(data){
					/* //js 实现for循环
					for(var i=0;i<data.length;i++){
						var user=data[i]
						console.log(user)
					} */
					/* //增强for循环 index 表示下标
					for(var index in data){
						console.log(data[index])
					} */
					//增强for循环 of 表示直接获取遍历内容
					for(var user of data){
						var id=user.id
						var name=user.name
						var age=user.age
						var sex=user.sex
						var tr="<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
						//利用id选择器定位table标签
						$("#tab1").append(tr)
						
					}
				})
			})
		</script>
		
	</head>
	<body>
		<table id="tab1" border="1px" width="700px" align="center">
			<tr>
				<td colspan="4" align="center">
				  <h1>表格数据</h1>	
				</td>
			</tr>
			<tr align="center">
				<td>ID编号:</td>
				<td>名称:</td>
				<td>年龄:</td>
				<td>性别:</td>
			</tr>
			
			
		</table>
		
	</body>
</html>
